<template>
  <div>
    <!-- 当isShow的值为true的时候 打印str  否则就调用函数 -->
    <h1>{{ isShow ? str : flipOff(str) }}</h1>
    <!-- 给按钮绑定一个点击事件   -->

    <button @click="flipOff">
      {{ isShow ? '切换战斗形态' : '切换防守形态' }}
    </button>
    <!-- 下面这个也可以实现这个功能 -->
    <!-- <button @click="flipOff">切换</button> -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShow: true,

      isIf: false,

      str: '今天开始我会自己上厕所,爸爸妈妈你们不要小看我！',
    }
  },

  //
  // 虽然不知道为什么 但是methods里面的this可以指向data里面的数据
  methods: {
    // 我们封装一个函数
    flipOff() {
      // str里面的字符换用split方法添加空字符串变成数组
      // 然后在用翻转方法
      // 然后在用join方法把数组连起来变成一个字符串
      this.str = this.str.split('').reverse().join('')
    },
    //
    //
  },
}
</script>

<style></style>
